<template>
  <section class="container">
    <div class="zuobian">
      <h2>发表新攻略</h2>
      <p class="pp">分享你的个人游记，让更多人看到哦！</p>
      <el-input v-model="form.title" placeholder="请输入内容"></el-input>

      <!-- 富文本框  -->
      <vue-editor
        v-model="form.content"
        class="fuwenben"
        :editorToolbar="customToolbar"
        :useCustomImageHandler="true"
        @image-added="imgUpload"
      ></vue-editor>

      <p class="chengshi">
        选择城市
        <el-autocomplete
          :fetch-suggestions="queryDepartSearch"
          placeholder="请搜索出发城市"
          @select="handleDepartSelect"
          v-model="state"
        ></el-autocomplete>
      </p>

        <el-button type="primary" @click="fabu" class="BTN">主要按钮</el-button>
    </div>

    <div class="caogao">草稿箱</div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      customToolbar: [
        ["bold", "italic", "underline"],
        [{ list: "ordered" }, { list: "bullet" }],
        ["image", "code-block"]
      ],
      form: {
        title: "", //输入框
        content: "等待输入中~~~ ", //富文本输入框
        city: "" // 城市
      },
      state: ""
    };
  },

  methods: {
    //富文本框添加图片触发的函数
    imgUpload(file, Editor, cursorLocation, resetUploader) {
      console.log("添加了的图片");
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      //   file上传的文件
      //Editor 是我们正在使用编辑器
      // cursorLocation 这是子组件获取当前的光标位置
      // resetUploader 当年处理完了所有数据 应该重置这个上传组件
      var formData = new FormData();
      formData.append("files", file);

      this.$axios({
        url: "/upload",
        method: "POST",
        data: formData
      })
        .then(res => {
          let url = this.$axios.defaults.baseURL + res.data[0].url; // Get url from response
          Editor.insertEmbed(cursorLocation, "image", url);
          resetUploader();
          console.log(res.data[0]);
        })
        .catch(err => {
          console.log(err);
        });
    },

    queryDepartSearch(value, cb) {
      if (!value.trim()) {
        return cb([]);
      }
      this.$axios({
        url: "/airs/city",
        params: {
          name: value
        }
      }).then(res => {
        const { data } = res.data;
        let newData = [];
        data.forEach(v => {
          v.value = v.name.replace("市", "");
          newData.push(v);
        });
        //   console.log(data);
        cb(newData);
        this.city = newData[0].value;
        console.log(this.city);
      });
    },

    // 出发城市下拉选择时触发
    handleDepartSelect(item) {
      this.form.city = item.value;
    },
    fabu(){
        this.$axios({
            url:"/posts",
            method: "POST",
            data:this.form,
            headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token
        }
        }).then(res=>{
            console.log(res.data);
            this.$message(res.data.message);
            
        })
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-bottom: 20px;
}

// 左边发布
.zuobian {
  width: 750px;
  h2 {
    margin: 10px 0;
  }
  .pp {
    font-size: 12px;
    color: #999;
    margin-bottom: 20px;
  }
  .chengshi{
    margin-top: 20px;
  }
  .fuwenben {
    margin-top: 20px;
  }
  .BTN{
    margin-top: 20px;
  }
}

// 草稿箱
.caogao {
  width: 200px;
  height: 101px;
  border: 1px solid #ccc;
}
</style>